<template>
  <div class="main-content" style="padding-top: 60px">
    <div style="display: flex; grid-gap: 20px">
      <!-- 标签 -->
      <div style="width: 150px; height: 515px; overflow: auto" class="card">
        <div
          class="category-item"
          :class="{ 'category-item-actice': '个人信息' === current }"
          @click="select('个人信息')"
        >
          个人信息
        </div>
        <div
          class="category-item"
          :class="{ 'category-item-actice': '已发布' === current }"
          @click="select('已发布')"
        >
          已发布
        </div>
        <div
          class="category-item"
          :class="{ 'category-item-actice': '待审核' === current }"
          @click="select('待审核')"
        >
          待审核
        </div>
         <div
          class="category-item"
          :class="{ 'category-item-actice': '已下架' === current }"
          @click="select('已下架')"
        >
          已下架
        </div>
        <div
          class="category-item"
          :class="{ 'category-item-actice': '我的收藏' === current }"
          @click="select('我的收藏')"
        >
          我的收藏
        </div>
         <div
          class="category-item"
          :class="{ 'category-item-actice': '我的喜欢' === current }"
          @click="select('我的喜欢')"
        >
          我的喜欢
        </div>
         <div
          class="category-item"
          :class="{ 'category-item-actice': '我的帖子' === current }"
          @click="select('我的帖子')"
        >
          我的帖子
        </div>
         <div
          class="category-item"
          :class="{ 'category-item-actice': '数据统计与分析' === current }"
          @click="select('数据统计与分析')"
        >
          数据统计与分析
        </div>
      </div>

      <!-- 帖子内容 -->
      <div
        style="flex: 1; display: flex; height: 515px; overflow: auto"
        class="card"
        v-if="
          current === '已发布' ||
          current === '我的收藏' ||
          current === '待审核' ||
          current === '我的收藏'||
          current === '已下架'||
          current === '我的喜欢'||
          current === '我的帖子'
        "
      >
        <!-- 帖子 -->
        <div
          style="flex: 1; text-align: left; padding: 20px; position: relative"
        >
          <div style="height: 85%; width: 100%">
            <div
              v-for="item in posts"
              :key="item.postId"
              style="
                display: flex;
                grid-gap: 15px;
                padding: 20px;
                border: 2px solid #1890ff;
                border-radius: 10px;
                margin-bottom: 26px;
              "
              class="float-div"
            >
              <div style="flex: 1">
                <div style="display: flex">
                  <div
                    style="flex: 4"
                    class="oneline petForumTitle"
                    @click="push(item.postId)"
                  >
                    {{ item.title }}
                  </div>
                  <div style="flex: 1;text-align: right;" v-if="current!='我的收藏'">
                    <el-button
                     type="danger"
                      @click="handleDelete(item.postId)"
                      style="width: 50px;"
                      >删除</el-button
                    >
                  </div>
                </div>
                <div
                  style="
                    color: #666;
                    margin-top: 10px;
                    font-size: 14px;
                    line-height: 1.4em;
                    height: 2.8em;
                  "
                  class="towline"
                >
                  {{ item.introduction }}
                </div>
                <div
                  style="
                    display: flex;
                    align-items: flex-start;
                    margin-top: 10px;
                  "
                >
                  <div style="flex: 1; font-size: 12px; display: flex">
                    <span style="flex: 1" class="oneline">
                      <i class="el-icon-user"></i>{{ item.realName }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <i class="el-icon-view"></i>{{ item.views }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <!-- 同样的方式处理其他的 span -->
                      <i class="el-icon-star-off"></i>{{ item.favorites }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <!-- 同样的方式处理其他的 span -->
                      <i class="el-icon-like"></i>{{ item.likes }}
                    </span>
                  </div>

                  <div
                    style="width: fit-content; margin-top: -5px"
                    class="oneline"
                  >
                    <el-tag
                      type="primary"
                      v-for="(item1, index) in JSON.parse(item.tag)"
                      :key="index"
                      style="margin-right: 10px; font-size: 12px"
                      >{{ item1 }}</el-tag
                    >
                  </div>
                </div>
              </div>
              <div style="width: 175px">
                <img
                  style="width: 100%; height: 100px; border-radius: 5px"
                  :src="item.mediaLink"
                  alt=""
                />
              </div>
            </div>
            <div
              v-if="size === 0"
              style="
                padding: 20px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
              "
            >
              <el-empty :image-size="0" />
            </div>
            <!-- 页眉 -->
          </div>
          <span class="page-number">{{ pageNum }}</span>
        </div>
      </div>

      <!-- 个人信息 -->
      <div
        style="flex: 1; display: flex; height: 515px; overflow: auto"
        class="card"
        v-if="current === '个人信息'"
      >
        <el-form :model="user" label-width="120px">
          <el-form-item label="用户名">
            <el-input v-model="user.username" disabled/>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="user.realName" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="user.phone" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email" />
          </el-form-item>
          <el-form-item label="交友宣言">
            <el-input v-model="user.profile" style="width: 600px" />
          </el-form-item>
          <el-form-item label="头像">
            <el-image
              v-if="user.avatar"
              style="width: 100px; height: 100px"
              :src="user.avatar"
              :preview-src-list="[user.avatar]"
            />
            <!-- exibe a imagem -->
          </el-form-item>
          <el-form-item label="注册时间">
            <el-input
              v-model="user.registrationDate"
              style="width: 600px"
              disabled
            />
          </el-form-item>
          <el-button type="primary" style="width: 50px" @click="updateUser()"
            >保存</el-button
          >
        </el-form>
      </div>
      <!-- 待审核 -->
      <!-- 我的收藏 -->
      <!-- 数据统计与分析 -->
      <div v-if="current==='数据统计与分析'" style="display: flex;gap: 250px;padding-top: 200px;">
        <div></div>
        <div class="circle" >
          <div style="padding: 10px;">24</div>
          <div>帖子数量</div>
        </div>
        <div class="circle" >
          <div style="padding: 10px;">6</div>
          <div>帖子收藏</div>
        </div>
        <div class="circle" >
          <div style="padding: 10px;">18</div>
          <div>帖子喜欢</div>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
//请求
import request from "@/utils/request";

export default {
  name: "Person",
  components: {},
  data() {
    return {
      // 当前选中类型
      current: "个人信息",
      posts: [], //帖子
      size: 0, //当前页大小是否有数据
      user: {}, //用户信息
    };
  },
  mounted() {
    request.get("/userinfo/getInfo").then((res) => {
      this.user = res.data;
    });
  },
  created() {},
  methods: {
    select(name) {
      this.current = name;
      if (name === "已发布") {
        this.size = 1;
        request.post("/post/myPublishPost").then((res) => {
          this.posts = res.data;
          if (Array.isArray(res.data) && res.data.length === 0) {
            this.size = 0;
          }
        });
      } else if (name === "个人信息") {
        request.get("/userinfo/getInfo").then((res) => {
          this.user = res.data;
        });
      } else if (name === "我的收藏") {
        this.size = 1;
        request.post("/post/myStarPost").then((res) => {
          this.posts = res.data;
          if (Array.isArray(res.data) && res.data.length === 0) {
            this.size = 0;
          }
        });
      } else if (name === "待审核") {
        request.post("/post/myExamPost").then((res) => {
          this.size = 1;
          this.posts = res.data;
          if (Array.isArray(res.data) && res.data.length === 0) {
            this.size = 0;
          }
        });
      }else if(name==="已下架"){
        request.post("/post/under").then((res) => {
          this.size = 1;
          this.posts = res.data;
          if (Array.isArray(res.data) && res.data.length === 0) {
            this.size = 0;
          }
        });
      }else if(name==="我的喜欢"){
         this.size = 1;
        request.post("/post/myLikePost").then((res) => {
          this.posts = res.data;
          if (Array.isArray(res.data) && res.data.length === 0) {
            this.size = 0;
          }
        });
      }else if(name==="数据统计与分析"){

      }else if(name==="我的帖子"){
        request.post("/post/myPost").then((res) => {
          this.size = 1;
          this.posts = res.data;
          if (Array.isArray(res.data) && res.data.length === 0) {
            this.size = 0;
          }
        });
      }
    },
    //更新用户
    updateUser() {
      request.put("/userinfo/", JSON.stringify(this.user)).then((res) => {
        if (res.code === 0) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    //删除帖子
    handleDelete(id){
       this.$confirm("此操作将永久删除该帖子是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        //确定
        .then(() => {
          request.delete("/post/delete/" + id).then((res) => {
            if (res.code === 0) {
              this.$message({
                showClose: true,
                message: "删除成功!",
                type: "success",
              });
              this.select(this.current);
            } else {
              this.$message({
                showClose: true,
                message: "删除失败!",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          //取消
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //导航到
    push(postId) {
      this.$router.push(`/user/postDetail?postId=${postId}`);
    },
  
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.main-content {
  width: 85%;
  margin: 5px auto;
}
/* 防止缩小后样式发生改变 */
@media screen and (max-width: 768px) {
  .main-content {
    width: 100%; /* 在小屏幕下铺满整个宽度 */
    padding: 0 10px; /* 添加一些 padding 来保持内容与屏幕边缘的距离 */
  }
}
.card {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-actice {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}
.petForumTitle {
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.petForumTitle:hover {
  color: #1890ff;
}
/* 超双行省略 */
.towline {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 超出几行省略 */
  overflow: hidden;
}
/* 超单行省略 */
.oneline {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 超出几行省略 */
  overflow: hidden;
}

/* 滚动条 */
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
  max-height: 5px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #1890ff;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 将元素设置为圆形 */
    background-color: #1890ff; /* 设置背景色为淡蓝色 */
    animation: pulse 2s infinite alternate; /* 应用pulse动画效果，持续时间为2秒，无限循环 */
  }
  
  /* pulse动画定义 */
  @keyframes pulse {
    0% {
      transform: scale(1); /* 开始时不进行缩放 */
      opacity: 1; /* 完全不透明 */
    }
    100% {
      transform: scale(1.2); /* 结束时放大1.2倍 */
      opacity: 0.5; /* 半透明 */
    }
  }
</style>
